<template>
  <div class="block">
    <h3>本企业目前已安排面试</h3>
<!--    {{this.seekers}}-->
<!--    {{this.occupations}}-->
<!--    {{this.interviewEnterpriseData.interviewEnterprise}}-->
    <el-table :data="tableData" stripe border class="select_table">
      <el-table-column prop="interviewId" label="面试编号" width="80"></el-table-column>
<!--      change-->
      <el-table-column prop="seekerName" label="求职者" width="170">
      </el-table-column>
      <el-table-column label="面试时间">
        <el-table-column prop="interviewDate" label="日期" width="150"></el-table-column>
        <el-table-column prop="interviewTime" label="时间" width="150"></el-table-column>
      </el-table-column>
      <el-table-column prop="interviewLocation" label="地址" width="400"></el-table-column>
<!--      change-->
      <el-table-column prop="occupationName" label="求职职位" width="150">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="220">
        <template slot-scope="scope">
          <el-button-group>
            <el-button :plain="true" @click="openEditDialog(scope.row)" type="primary" icon="el-icon-edit">编辑</el-button>
            <el-button @click="deleteView(scope.row)" type="primary" icon="el-icon-delete">删除</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <!-- Edit Dialog -->
    <el-dialog :visible.sync="editDialogVisible" title="编辑面试信息">
      <el-form :model="editForm">
        <el-form-item label="面试编码">
          <el-input v-model="editForm.interviewId" readonly></el-input>
        </el-form-item>
        <el-form-item label="求职者">
          <el-input v-model="editForm.interviewSeeker" readonly></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker v-model="editForm.interviewDate" @change="pickerchange" type="date"  value-format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item label="时间">
          <el-time-picker v-model="editForm.interviewTime" value-format="HH:mm:ss" placeholder="选择时间"></el-time-picker>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="editForm.interviewLocation"></el-input>
        </el-form-item>
        <el-form-item label="求职职位">
          <el-input v-model="editForm.interviewOccupation" readonly></el-input>
        </el-form-item>
        <el-form-item label="本企业编号">
          <el-input v-model="editForm.interviewEnterprise" readonly></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEditForm">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          interviewId: '',
          interviewLocation: '',
          interviewDate: '',
          interviewTime: '',
          interviewOccupation: '',
          interviewEnterprise: '',
          interviewSeeker: '',
          seekerName: '',
          occupationName: ''
        }
      ],
      seekers: [], // 存储求职者数据
      occupations: [], // 存储职位数据
      editDialogVisible: false,
      editForm: {
        interviewId: '',
        interviewLocation: '',
        interviewDate: '',
        interviewTime: '',
        interviewOccupation: '',
        interviewEnterprise: '',
        interviewSeeker: '',
        seekerName: '',
        occupationName: ''
      },
      interviewEnterpriseData: {
        interviewEnterprise: ''
      },
      pickerOptions: {
        disabledDate(v) {
          return v.getTime() < new Date().getTime() - 86400000;//  - 86400000是否包括当天
        }
      }
    }
  },

  methods: {

    fetchSeekers() {
      this.$axios.get('/seeker/allSeeker').then((resp) => {
        this.seekers = resp.data;
      });
    },
    fetchOccupations() {
      this.$axios.post('/occupation/allOccupations',this.interviewEnterpriseData).then((resp) => {
        this.occupations = resp.data;
      });
    },
    fetchInterviews() {
      this.$axios.post('/interview/selectByEnterpriseId',this.interviewEnterpriseData).then((resp) => {
        this.tableData = resp.data
      });
    },

    openEditDialog(interview) {
      this.editForm = {...interview};
      this.editDialogVisible = true;
    },

    submitEditForm() {
      this.$axios.post('/interview/updateInterview', this.editForm).then((resp) => {
        if (resp.data.code > -1) {
          this.$message({
            showClose: true,
            message: '更新面试信息成功',
            type: 'success'
          });
          this.editDialogVisible = false;
          this.fetchInterviews();
        } else {
          this.$message({
            showClose: true,
            message: '更新面试信息失败',
            type: 'error'
          });
        }
      });
    },

    deleteView(interview) {
      this.$axios.post('/interview/deleteById?interviewId=' + interview.interviewId).then((resp) => {
        if (resp.data.code > -1) {
          this.$message({
            showClose: true,
            message: '取消面试成功',
            type: 'success'
          });
          this.fetchInterviews();
        } else {
          this.$message({
            showClose: true,
            message: '取消面试失败',
            type: 'error'
          });
        }
      });
    }
  },

  mounted() {
    this.fetchInterviews();
    this.fetchSeekers();
    this.fetchOccupations();
  },

  created(){
    this.interviewEnterpriseData.interviewEnterprise = this.$store.state.id
  }
}
</script>

<style scoped>
.select_table {
  width: 100%;
}

.block {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.dialog-footer {
  text-align: right;
}
</style>
